<template>
    <div class="page-container">
        <Example title="基本用法">
            <a-space direction="vertical">
                <a-dropdown>
                    <span >Hover me</span>
                    <a-menu slot="overlay">
                        <a-menu-item>One</a-menu-item>
                        <a-menu-item>Two</a-menu-item>
                        <a-menu-item>Three</a-menu-item>
                    </a-menu>
                </a-dropdown>
                <a-dropdown :trigger="['click']">
                    <span >Click me</span>
                    <a-menu slot="overlay">
                        <a-menu-item>One</a-menu-item>
                        <a-menu-item>Two</a-menu-item>
                        <a-menu-item>Three</a-menu-item>
                    </a-menu>
                </a-dropdown>
            </a-space>
        </Example>

        <Example title="右键">
            <a-dropdown :trigger="['contextmenu']">
                <div
                :style="{
                    textAlign: 'center',
                    background: '#f7f7f7',
                    height: '100px',
                    lineHeight: '100px',
                    color: '#777',
                }">Right Click on here</div>
                <a-menu slot="overlay">
                    <a-menu-item key="1">
                        1st menu item
                    </a-menu-item>
                    <a-menu-item key="2">
                        2nd menu item
                    </a-menu-item>
                    <a-menu-item key="3">
                        3rd menu item
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </Example>

        <Example title="dropdown button">
            <a-dropdown-button>
                Dropdown
                <a-menu slot="overlay">
                    <a-menu-item key="1"> <a-icon type="user" />1st menu item </a-menu-item>
                    <a-menu-item key="2"> <a-icon type="user" />2nd menu item </a-menu-item>
                    <a-menu-item key="3"> <a-icon type="user" />3rd item </a-menu-item>
                </a-menu>
            </a-dropdown-button>
        </Example>
    </div>
</template>

<script>
export default {

};
</script>

<style>

</style>
